Transcript PowerPoint-presentatie
WEBSITES ONTWIKKELINGEN • Trends en standaarden op het gebied van webdesign • HTML, DHTML, XHTML, FLASH, CSS
Henk Zegwaard december 2003
Geschiedenis
• 1945- Vannevar Bush (!): "The human mind...operates by association. With one item in its grasp, it snaps instantly to the next that is suggested by the association of thoughts, in accordance with some intricate web of trails carried by the cells of the brain." • Theodor Holm Nelson (1981-Xanadu): van menselijk brein naar wereldweb • Ontstaan van het WWW: 1991 door CERN (Tim Berners-Lee) • 1994: World Wide Web Consortium (W3C)
bron:
History of the WWW
HTML – het begin
• Behoefte aan manier om documenten over netwerk te versturen • Hypertext Markup Language – Tags voor de opmaak Bijv.:
Dit is een kop
– Lay-out wordt overgelaten aan Browser – Link: Eerste browser HTML editorHTML voorbeelden Van saai naar ‘leuk’
HTML – en toen …(1)
• Probleem: navigatie – Oplossing: Frames • Probleem: controle over indeling pagina – Oplossing: Tabellen
HTML – en toen… (2)
• Probleem: controle over vormgeving/lay-out – Oplossing: Flash CSS • Probleem: interactiviteit – Oplossing: DHTML (client-side scripting - javascript) Serverside-scripting (PHP, ASP, JSP etc.)
Frames voor- en nadelen
• Voordelen: – Boek over HTML uit 2000: “…veel gebruikt en keurmerk voor geavanceerde sites…” – Sneller laden (alleen mainframe) – Heldere navigatie – Scheiding content en structuur • Nadelen: – Juridisch (laden van andere site in eigen site) – ‘Deep-linken’ – Browsers gingen verschillend om met frames – Probleem voor zoekmachines
Tabellen voor- en nadelen
• Voordelen: – Controle over positie (geneste tabellen) – Controle over breedte (relatief – absoluut) – Goede ondersteuning door browsers • Nadelen: – Snelheid wordt negatief beinvloed door (vooral geneste) tabellen – Onoverzichtelijkheid – Niet print-vriendelijk
W3C -webstandaarden
• World Wide Web Consortium (W3C) – Opgericht in 1994 – Leidende rol m.b.t. technische ontwikkelingen van het Web – Ontwikkelen van standaarden en aanbevelingen – Toegankelijkheid (Accessibility) en gebruikersvriendelijkheid (Usability) – Validatie van websites Link: http://www.w3.org/
W3C - aanbevelingen
• M.b.t. webdesign: – Tabellen niet voor lay-out, alleen voor data-weergave – Ook frames worden afgeraden (zie nadelen) • Wat dan wel: – aansluiten bij XML XHTML – Scheiden van content en opmaak d.m.v. Cascading Style Sheets (CSS)
• •
XML - XHTML
– – – – – XML: Principe: scheiding van inhoud en lay-out Meta-taal: definieert en beschrijft elke vorm van informatie Platform-onafhankelijk en uitbreidbaar Gebaseerd op gewone tekst (Unicode) Tags zijn zelf te definieren – – – – – – XHTML: Alle tags en attributen moeten in
kleine letters
staan. Alle XHTML elementen moeten
afgesloten
Alle attribuutwaarden moeten
gequote
Het
id-attribuut
worden. worden. vervangt het name-attribuut. Het script-element moet een
type-definitie
krijgen. Documenten moet overeenkomstig de
XML-regels
worden. opgesteld – XHTML krijgen nog enkele
verplichte bijkomende elementen
.
Cascading Style Sheets
• • • • • Vormgeving van (X)HTML-elementen Wordt al langer gebruikt, ook i.c.m. tabellen en frames December 1996: CSS1 werd W3C-aanbeveling Ondersteuning door browsers steeds beter Drie mogelijkheden: – Inline CSS-code – Style Sheet op documentniveau – Style Sheet in extern bestand
CSS – inline stijlen
• • Opmaakinformatie voor een afzonderlijk element Voorbeeld:
Dit is een grote blauwe kop
CSS – op documentniveau
• • Opmaakmodel in het head-gedeelte van een HTML-document Voorbeeld:
Dit is een grote groene kop
en hier staat wat tekst van 10px
• •
CSS – externe opmaakmodellen
Opmaakmodel in een apart tekstbestand Voorbeeld: Html-pagina: mijnopmaak.css: body {background-color : white;} h1, h2 {color: red;} p {font-size: 12px;}
Dit is een rode kop op een witte achtergrond
en hier staat wat tekst van 12px
CSS – voordelen
• • • • Overzichtelijkheid en flexibiliteit door scheiding van inhoud en opmaak Betere controle over opmaak Snelheid (bij gebruik van extern bestand) door caching van het css-bestand Werken volgens aanbevelingen en standaarden van W3C
CSS-sites voorbeelden
• Voorbeelden van CSS – XHTML sites:
• • • • •
Bronnen en links
– Webstandaarden en aanbevelingen: w3c.org
– – – – – – – – – CSS/XHTML sites: Stijlstek.nl
alistapart.com
Bitstorm.org (cursus css) saila.com: tables or css?
webdesign.about.com: avoid tables thenoodleincident.com
csszengarden.com
www.khlim.be : xhtml w3schools.com : xhtml – – Geschiedenis sites: webhistory.org : geschiedenis van het web ei.cs.vt.edu : geschiedenis van www – Divers: aboyandhiscomputer.com : slechte websites – – – Boeken: Eric Meyer: On CSS Eric Meyer: CSS Kort en Krachtig Sybex/Het Beste Boek: HTML